<template>
    <div id="category">
        <NavBar class="nav-bar">
            <div slot="center">商品分类</div>
        </NavBar>
        <div class="content">
            <TabMenu :categories="categories" @selectItem="selectItem"></TabMenu>
            <Scroll id="tab-content" ref="scroll" @scroll="contentScroll" :probe-type="3">
                <TabContentCategory :subCategories="showSubCategory"></TabContentCategory>
                <TabControl :titles="['综合', '新品', '销量']" @tabClick="tabClick"></TabControl>
                <TabContentDetail :categoryDetail="showCategoryDetail"></TabContentDetail>
            </Scroll>
            <BackTop @click.native="backClick" v-if="isShowBackTop"></BackTop>
        </div>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl'
import BackTop from 'components/content/backTop/BackTop'

import TabMenu from './childComps/TabMenu'
import TabContentCategory from './childComps/TabContentCategory'
import TabContentDetail from './childComps/TabContentDetail'

import {getCategory,getSubCategory,getCategoryDetail} from 'network/category'

import {POP,SELL,NEW} from 'common/const'
import {tabControlMinin,backTopMinin} from 'common/mixin'
export default {
    name:'Category',
    components:{
        NavBar,Scroll,TabControl,BackTop,
        TabMenu,TabContentCategory,TabContentDetail
    },
    // 混入
    mixins:[tabControlMinin,backTopMinin],
    data() {
        return {
            categories:[],//分类数据
            categoryData:{},//分类详情数据
            currentIndex:-1,
            // currentType:POP,
        }
    },
    computed: {
        showSubCategory(){
            if(this.currentIndex === -1)return{}
            return this.categoryData[this.currentIndex].subCategories
        },
        showCategoryDetail(){
            if(this.currentIndex === -1)return[]
            return this.categoryData[this.currentIndex].categoryDetial[this.currentType]
        }
    },
    created() {
        //请求分类数据
        this._getCategory()
    },
    methods: {
        // 分类选择与点击
        selectItem(index){
            // console.log(index)
            this._getSubCategories(index)
        },
        //请求分类数据
        _getCategory(){
            getCategory().then(res=>{
                // console.log(res)
                this.categories=res.data.data.category.list
                console.log(this.categories)
                // 初始化每个类别的子数据
                for(let i=0;i<this.categories.length;i++){
                    this.categoryData[i]={
                        subCategories:{},
                        categoryDetial:{
                            'pop':[],
                            'new':[],
                            'sell':[]
                        }
                    }
                }
                // 这里请求第一个分类的数据
                this._getSubCategories(0)
            })
        },
        // 分类里的二级分类信息
        _getSubCategories(index){
            this.currentIndex=index
            const mailKey=this.categories[index].maitKey
            getSubCategory(mailKey).then(res=>{
                // console.log(res)
                this.categoryData[index].subCategories=res.data.data
                this.categoryData={...this.categoryData}
                this._getCategoryDetail(index,POP)
                this._getCategoryDetail(index,SELL)
                this._getCategoryDetail(index,NEW)
            })
        },
        // 分类里的详细信息
        _getCategoryDetail(index,type){
            const miniWallkey=this.categories[index].miniWallkey
            getCategoryDetail(miniWallkey,type).then(res=>{
                // console.log(res)
                this.categoryData[index].categoryDetial[type]=res.data
                // this.categoryData={...this.categoryData}
                console.log(this.categoryData)
            })
        },
        // 滚动
        contentScroll(position){
            // console.log(position)
            if(-position.y>1000)this.isShowBackTop=true
            else this.isShowBackTop=false
        },
        // tabClick(index){
        //     switch(index){
        //         case 0:
        //             this.currentType=POP
        //             break
        //         case 1:
        //             this.currentType=NEW
        //             break
        //         case 2:
        //             this.currentType=SELL
        //             break
        //     }
        //     // console.log("QUAN "+this.currentType)
        // }
    },
}
</script>
<style scoped>
#category {
    height: 100vh;
}

.nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    overflow: hidden;
    display: flex;
}

#tab-content {
    height: 100%;
    flex: 1;
    overflow: hidden;
}
</style>